<template>
  <div>
    <div>
      <div>
        <h2>商品列表</h2>
      </div>

      <!-- 搜索框 -->
      <div class="search-box">
        <span>商品名称</span><input type="text" v-model="name" />
        <!-- <span>发布日期</span><input type="Date" v-model="createTime"> -->
        <button @click="searchProduct(1, 5)">搜索</button>
      </div>

      <!-- 商品表格 -->
      <table v-if="pageBean.total > 0">
        <thead>
          <tr>
            <th>商品名称</th>
            <th>商品图片</th>
            <th>库存</th>
            <th>价格</th>
            <th>时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="product in pageBean.list" :key="product.id">
            <td v-html="product.name"></td>
            <td><img :src="url + product.fileName" width="40px"></td>
            <td>{{ product.stock }}</td>
            <td>{{ product.price }}</td>
            <td>{{ product.createDate }}</td>
            <td>
              <button @click="upProduct(product)">修改</button>
              <button @click="delProduct(product.id)">删除</button>
            </td>
          </tr>

        </tbody>
      </table>
      <h1 v-else>暂无数据</h1>
 
      <div class="pagination" v-if="pageBean.pages > 1">
        <span>共 {{ pageBean.total }} 条记录</span>
        <span>{{ pageBean.pageNum }} / {{ pageBean.pages }}</span>
        <button @click="changePage(1)">首页</button>
        <button @click="changePage(pageBean.pageNum - 1)" :disabled="pageBean.pageNum === 1">上一页 </button>

        <button v-for="page in pageBean.navigatePages" :key="page" @click="changePage(page)" :disabled="pageBean.pageNum === page"
          style="margin: 5px;"> {{ page }} </button>

        <button @click="changePage(pageBean.pageNum + 1)" :disabled="pageBean.pageNum === pageBean.pages">下一页</button>
        <button @click="changePage(pageBean.pages)">末页</button>
      </div>
    </div>
  </div>


</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from "axios";
import { useRouter } from 'vue-router'

const router = useRouter()

const url = "http://192.168.12.159:83/"
const pageBean = ref({
  list: [],
  pageNum: 1,
  pageSize: 5,
  pages: 0,
  total: ''
})


const name = ref('')
const createTime = ref('')

const searchProduct = async (pageNum, pageSize) => {
  const response = await axios.get("api/proList", {
    params: {
      pageNum: pageNum,
      pageSize: pageSize,
      name: name.value,
      createDate: createTime.value
    },
  })

  pageBean.value = response.data

 
}

const upProduct = (product) => {
  router.push({
    path: '/updateProduct',
    query: {
      id: product.id,
      originalName: product.name
    }
  })
}

const delProduct = async (id) => {
  if (confirm('确定要删除该商品')) {
    const response = await axios.get('api/deleteProduct', {
      params: { id: id }
    })

    console.log(response.data)
    if (response.data.code === 5200) {
      alert('删除成功')
      searchProduct(pageBean.value.pageNum, 5)
    } else {
      alert('删除失败')
    }
  }
}

// 换页
const changePage = (page) => {
  if (page < 1 || page > pageBean.value.pages) return
  searchProduct(page, 5)
}

onMounted(() => {
  searchProduct(1, 5)
})
</script>

<style></style>